<script src="<?= $staticAdminUrl ?>assets/laydate/laydate.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var barChart = echarts.init(document.getElementById('bar-echarts'));
    var brandChart = echarts.init(document.getElementById('brand-echarts'));
    var personChart = echarts.init(document.getElementById('person-echarts'));
    // 指定作业统计柱形图的配置项和数据
    var barOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color: ['#FFB751', '#D25B47', '#87B880', '#000000', '#448FB9'],
        legend: {
            data: ['作业', '动态', '通知', '紧急通知', '校园公告'],
            orient: 'vertical',
            align: 'left',
            left: '85%',
            top: '6%'
        },
        grid: {
            right: '18%'
        },
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: [
                <?php foreach ($data['dataNum']['homeworkNum']['date'] as $date): ?>
                    '<?= $date ?>',
                <?php endforeach; ?>
            ]
        },
        series: [{
                name: '作业',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: function (params) {
                            if (params.value > 0) {
                                return params.value;
                            } else {
                                return '';
                            }
                        }
                    }
                },
                data: [
                    <?php foreach ($data['dataNum']['homeworkNum']['value'] as $num): ?>
                    <?= $num ?>,
                    <?php endforeach; ?>
                ]
            },
            {
                name: '动态',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: function (params) {
                            if (params.value > 0) {
                                return params.value;
                            } else {
                                return '';
                            }
                        }
                    }
                },
                data: [
                    <?php foreach ($data['dataNum']['newsNum']['value'] as $num): ?>
                    <?= $num ?>,
                    <?php endforeach; ?>
                ]
            },
            {
                name: '通知',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: function (params) {
                            if (params.value > 0) {
                                return params.value;
                            } else {
                                return '';
                            }
                        }
                    }
                },
                data: [
                    <?php foreach ($data['dataNum']['notifyNum']['value'] as $num): ?>
                    <?= $num ?>,
                    <?php endforeach; ?>
                ]
            },
            {
                name: '紧急通知',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: function (params) {
                            if (params.value > 0) {
                                return params.value;
                            } else {
                                return '';
                            }
                        }
                    }
                },
                data: [
                    <?php foreach ($data['dataNum']['urgentNotifyNum']['value'] as $num): ?>
                    <?= $num ?>,
                    <?php endforeach; ?>
                ]
            },
            {
                name: '校园公告',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: function (params) {
                            if (params.value > 0) {
                                return params.value;
                            } else {
                                return '';
                            }
                        }
                    }
                },
                data: [
                    <?php foreach ($data['dataNum']['announceNum']['value'] as $num): ?>
                    <?= $num ?>,
                    <?php endforeach; ?>
                ]
            }
        ]
    };
    // 指定班牌饼图的配置项和数据
    var brandOption = {
        title: {
            text: '在线班牌数量： <?= $data['brandOnlineNum'] ?>\n离线班牌数量： <?= $data['brandOfflineNum'] ?>',
            textStyle: {
                color: '#8A8A8A',
                fontSize: 14,
                lineHeight: 20,
                fontWeight: 'normal'
            },
            x: '68%',
            y: '60%'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ['#D25B47', '#448FB9'],
        legend: {
            left: '68%',
            top: '12%',
            data: ['在线班牌数量', '离线班牌数量']
        },
        grid: {
            right: '18%'
        },
        series: [{
            name: '班牌统计',
            type: 'pie',
            radius: '55%',
            center: ['30%', '50%'],
            data: [{
                    value: <?= $data['brandOnlineNum'] ?>,
                    name: '在线班牌数量'
                },
                {
                    value: <?= $data['brandOfflineNum'] ?>,
                    name: '离线班牌数量'
                }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    // 指定今日人数统计饼图的配置项和数据
    var personOption = {
        title: {
            // 暂不需要显示‘请假人数’和‘考勤人数’
            // text: '未到人数： <?= $data['dateStudentNum']['dateNotSignNum'] ?>\n已到人数： <?= $data['dateStudentNum']['dateSignNum'] ?>\n请假人数： <?= $data['dateStudentNum']['dateLeaveNum'] ?>\n考勤人数： <?= $data['dateStudentNum']['dateAttendNum'] ?>',
            text: "未到人数： <?= $data['dateStudentNum']['dateNotSignNum'] ?>\n已到人数： <?= $data['dateStudentNum']['dateSignNum'] ?>",
            textStyle: {
                color: '#8A8A8A',
                fontSize: 14,
                lineHeight: 20,
                fontWeight: 'normal'
            },
            x: '68%',
            y: '60%'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ['#D25B47', '#448FB9', '#FFB751', '#87B880'],
        legend: {
            left: '68%',
            // 暂不需要显示‘请假人数’和‘考勤人数’
            // top: '8%',
            top: '12%',
            
            // 暂不需要显示‘请假人数’和‘考勤人数’
            // data: ['今日未到人数', '今日已到人数', '今日请假人数', '今日考勤人数']
            data: ['今日未到人数', '今日已到人数']
        },
        grid: {
            right: '18%'
        },
        series: [{
            name: '人数统计',
            type: 'pie',
            radius: '55%',
            center: ['30%', '50%'],
            data: [{
                    value: <?= $data['dateStudentNum']['dateNotSignNum'] ?>,
                    name: '今日未到人数'
                },
                {
                    value: <?= $data['dateStudentNum']['dateSignNum'] ?>,
                    name: '今日已到人数'
                },
                // 暂不需要显示‘请假人数’和‘考勤人数’
                // {
                //     value: <?= $data['dateStudentNum']['dateLeaveNum'] ?>,
                //     name: '今日请假人数'
                // },
                // {
                //     value: <?= $data['dateStudentNum']['dateAttendNum'] ?>,
                //     name: '今日考勤人数'
                // }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    if (barOption && typeof barOption === "object") {
        barChart.setOption(barOption, true);
    }

    if (brandOption && typeof brandOption === "object") {
        brandChart.setOption(brandOption, true);
    }

    if (personOption && typeof personOption === "object") {
        personChart.setOption(personOption, true);
    }
    setTimeout(function (){
            window.onresize = function () {
                if (barOption) {
                    barChart.resize();
                }
                if (brandOption) {
                    brandChart.resize();
                }
                if (personOption) {
                    personChart.resize();
                }
            }
    },200)
    //执行一个laydate实例
    var chooseDate = getNowDate();
    var today = getNowDate();
    //设置作业时间区间开始为前6天
    var sixDayBefore = getBeforeSixDate();
    var rangeDate = sixDayBefore + ' - ' + today; 
    $('#sixDateBefore').html(sixDayBefore);
    //人数统计的时间选择器
    laydate.render({
        elem: '#person-calendar', //指定元素
        value: chooseDate,
        max: today,
        btns: ['now', 'confirm'],
        done: function(value) {
            if (value !== chooseDate) {
                if ('<?= $userType ?>' === '1') {
                    url = "/rmx/admin/get_admin_date_student_num/";
                } else {
                    url = "/rmx/school/get_date_student_num/";
                }
                $.ajax({
                    url: url + value,
                    success: function(result) {
                        res = JSON.parse(result);
                        data = res.data;
                        // personOption.title.text = '未到人数： ' + data.dateNotSignNum + '\n已到人数： ' + data.dateSignNum + '\n请假人数： ' + data.dateLeaveNum + '\n考勤人数： ' + data.dateAttendNum;
                        personOption.title.text = '未到人数： ' + data.dateNotSignNum + '\n已到人数： ' + data.dateSignNum;
                        personOption.series[0].data = [{
                                value: data.dateNotSignNum,
                                name: '今日未到人数'
                            },
                            {
                                value: data.dateSignNum,
                                name: '今日已到人数'
                            },
                            // {
                            //     value: data.dateLeaveNum,
                            //     name: '今日请假人数'
                            // },
                            // {
                            //     value: data.dateAttendNum,
                            //     name: '今日考勤人数'
                            // }
                        ];
                        if (personOption && typeof personOption === "object") {
                            personChart.setOption(personOption, true);
                        }
                    }
                });
            }
            chooseDate = value;
        }
    });
    //作业统计的时间选择器
    laydate.render({
        elem: '#work-calendar', //指定元素
        value: rangeDate,
        range: true,
        max: today,
        btns: ['confirm'],
        done: function(value) {
            if (value !== rangeDate) {
                if ('<?= $userType ?>' === '1') {
                    url = "/rmx/admin/get_admin_work_data_num/";
                } else {
                    url = "/rmx/school/get_work_data_num/";
                }
                var dates = value.split(' - ');
                $.ajax({
                    url: url + dates[0] + '/' + dates[1],
                    success: function(result) {
                        res = JSON.parse(result);
                        data = res.data;
                        barOption.xAxis.data = data.homeworkNum.date;
                        var series = barOption.series;
                        for (var i = 0; i < series.length; i++) {
                            if (barOption.series[i].name === '作业') {
                                barOption.series[i].data = data['homeworkNum']['value'];
                            } else if (barOption.series[i].name === '动态') {
                                barOption.series[i].data = data['newsNum']['value'];
                            } else if (barOption.series[i].name === '通知') {
                                barOption.series[i].data = data['notifyNum']['value'];
                            } else if (barOption.series[i].name === '紧急通知') {
                                barOption.series[i].data = data['urgentNotifyNum']['value'];
                            } else if (barOption.series[i].name === '校园公告') {
                                barOption.series[i].data = data['announceNum']['value'];
                            }
                        }
                        if (barOption && typeof barOption === "object") {
                            barChart.setOption(barOption, true);
                        }
                    }
                });
            }
            //动态修改时间区间开始时间
            var date = new Date(value);
            date.setDate(date.getDate(value) - 6);
            var sixDateBefore = formatDate(date);
            $('#sixDateBefore').html(sixDateBefore);

            rangeDate = value;
        }
    });
    //获取当天日期
    function getNowDate() {
        var date = new Date();
        $res = formatDate(date);
        return $res;
    }

    function getBeforeSixDate() {
        var date = new Date(); //获取今天日期
        date.setDate(date.getDate() - 6);
        $res = formatDate(date);
        return $res;
    }

    function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var dateFormat = year + "-" + month + "-" + day;
        return dateFormat;
    }
</script>